<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/xiaomi.css">
    <link rel="stylesheet" href="./css/公共.css">
    <script src="./js/xiaomi.js"></script>
</head>

<body>
    <div class="box">
        <!-- 头部导航栏 -->
        <div class="nav">
            <div class="text">
                <!-- 左边的内容 -->
                <div class="left">
                    <ul>
                        <li>
                            <a href="#">小米商城<span>|</span></a>
                        </li>
                        <li>
                            <a href="#">MIUI<span>|</span></a>
                        </li>
                        <li>
                            <a href="#">loT<span>|</span></a>
                        </li>
                        <li>
                            <a href="#">云服务<span>|</span></a>
                        </li>
                        <li>
                            <a href="#">天星数科<span>|</span></a>
                        </li>
                        <li>
                            <a href="#">有品<span>|</span></a>
                        </li>
                        <li>
                            <a href="#">小爱开放平台<span>|</span></a>
                        </li>
                        <li>
                            <a href="#">企业团购</a>
                        </li>
                    </ul>

                </div>
                <!-- 右边的内容 -->
                <div class="right">
                    <ul>
                        <li>
                            <a href="#">登录<span>|</span></a>
                        </li>
                        <li>
                            <a href="#">注册<span>|</span></a>
                        </li>
                        <li>
                            <a href="#">消息通知<span>|</span></a>
                        </li>
                        <li>
                            <a href="#" class="car">购物车(0)</a>
                            <div class="car-info">
                                <span>购物车没有东西</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 标题栏 第二个导航栏 -->
        <div class="nav-2">
            <div class="left">
                <div class="logo">
                    <img src="./img/logo.png" alt="">
                </div>
                <div class="iage">

                </div>
                <div class="iage1">
                    <ul>
                        <li><a href="">xiaomi手机</a></li>
                        <li><a href="">Redmi手机</a></li>
                        <li><a href="">电视</a></li>
                        <li><a href="">笔记本</a></li>
                        <li><a href="">平板</a></li>
                        <li><a href="">家电</a></li>
                        <li><a href="">路由器</a></li>
                        <li><a href="">服务中心</a></li>
                        <li><a href="">社区</a></li>
                    </ul>
                </div>
            </div>
            <div class="right">
                <input type="text" placeholder="元宇宙">
            </div>
            <div class="icon">></div>
        </div>
        <!-- 内容部分 -->
        <div class="cont">
            <div class="cont-info">
                <div class="cont-nav">
                    <div class="cont-nav-left">
                        <ul>
                            <li>
                                <a href="#">手机</a><em>></em>
                                <div class="cont-box">
                                    <div class="cont-box1">
                                        <div>
                                            <img src="./img/mix.webp" alt="">
                                            <a href="">Xiaomi Mix系列</a>
                                        </div>
                                        <div>
                                            <img src="./img/数字.webp" alt="">
                                            <a href="">Xiaomi 数字系列</a>
                                        </div>
                                        <div>
                                            <img src="./img/cicv.webp" alt="">
                                            <a href="">Xiaomi Cicv系列</a>
                                        </div>
                                        <div>
                                            <img src="./img/redmi.webp" alt="">
                                            <a href="">Redmi K系列</a>
                                        </div>
                                        <div>
                                            <img src="./img/redminote.webp" alt="">
                                            <a href="">Redmi Note系列</a>
                                        </div>
                                        <div>
                                            <img src="./img/redmi数字.webp" alt="">
                                            <a href="">Redmi 数字系列</a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <a href="#">电视</a><em>></em>
                                <div class="cont-box">
                                    <div class="cont-box1">
                                        <div>
                                            <img src="./img/b1.webp" alt="">
                                            <a href="">小米电视 S Pro Mini LED</a>
                                        </div>
                                        <div>
                                            <img src="./img/b2.webp" alt="">
                                            <a href="">小米电视 大师系列</a>
                                        </div>
                                        <div>
                                            <img src="./img/b3.webp" alt="">
                                            <a href="">小米电视 S系列</a>
                                        </div>
                                        <div>
                                            <img src="./img/b4.webp" alt="">
                                            <a href="">小米电视 EA系列</a>
                                        </div>
                                        <div>
                                            <img src="./img/b5.webp" alt="">
                                            <a href="">Redmi电视 MAX系列</a>
                                        </div>
                                        <div>
                                            <img src="./img/b6.webp" alt="">
                                            <a href="">Redmi电视 A系列</a>
                                        </div> 
                                    </div>
                                    <div class="cont-box2">
                                        <div>
                                            <img src="./img/b7.webp" alt="">
                                            <a href="">小米电视竞技A系列</a>
                                        </div>
                                    </div>                                
                                </div>
                            </li>
                            <li>
                                <a href="#">家电</a><em>></em>
                                <div class="cont-box"></div>
                            </li>
                            <li>
                                <a href="#">平板</a><em>></em>
                                <div class="cont-box"></div>
                            </li>
                            <li>
                                <a href="#">穿戴</a><em>></em>
                                <div class="cont-box"></div>
                            </li>
                            <li>
                                <a href="#">耳机</a><em>></em>
                                <div class="cont-box"></div>
                            </li>
                            <li>
                                <a href="#">健康</a><em>></em>
                                <div class="cont-box"></div>
                            </li>
                            <li>
                                <a href="#">生活</a><em>></em>
                                <div class="cont-box"></div>
                            </li>
                            <li>
                                <a href="#">智能</a><em>></em>
                                <div class="cont-box"></div>
                            </li>
                            <li>
                                <a href="#">电源</a><em>></em>
                                <div class="cont-box"></div>
                            </li>
                        </ul>
                    </div>
                    <div class="cont-nav-right">
                        <div class="nav-right">
                            <div class="img">
                                <img src="./img/img.jpg" alt="">
                                <img src="./img/1484efbc954604f2fff16aa8a7447c3d.webp" alt="">
                                <img src="./img/img2.webp" alt="">
                                <img src="./img/img3.webp" alt="">
                            </div>
                            <div class="left1"><</div>
                            <div class="right1">></div>
                            <div class="cicle">
                                <ul>
                                    <li class="first"></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
</body>

</html>